import React, { useState } from "react";
import { Card, Row, Col } from "antd";
import ReactEcharts from "echarts-for-react";
const ZhuEch = (props) => {
  const [sales, setSales] = useState([25, 50, 80, 50, 30, 10]);
  const [work, setwork] = useState([36, 120, 30, 105, 80, 20]);
  const [study, setstudy] = useState([66, 80, 36, 100, 30, 60]);
  const [qita, setqita] = useState([39, 120, 36, 11, 80, 70]);
  const [stores, setstores] = useState([16, 125, 36, 110, 60, 40]);
  // 配置对象
  const getOption = (sal, sto) => {
    return {
      tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
      grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
      legend: {
        data: ["吃饭", "睡觉", "工作", "学习", "其他"],
      },
      xAxis: {
        type: 'category',
        data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        axisTick: {
					alignWithLabel: true
				}
      },
      yAxis: [
				{
					type: 'value'
				}
			],
      legend: {
        textStyle: {
          fontSize: 13,
          color: "#FFFFFF",
        },
      },
      series: [
        {
          name: "吃饭",
          type: "bar",
          data: sales,
        },
        {
          name: "睡觉",
          type: "bar",
          data: stores,
        },
        {
          name: "工作",
          type: "bar",
          data: work,
        },
        {
          name: "学习",
          type: "bar",
          data: study,
        },
        {
          name: "其他",
          type: "bar",
          data: qita,
        },
      ],
    };
  };

  return (
    <div>
      <Row gutter={30}>
        <Col span={24}>
          <ReactEcharts
            option={getOption(sales, stores)}
            style={{ marginTop: "30px" }}
          />
        </Col>
      </Row>
    </div>
  );
};

export default ZhuEch;
